<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="/layui/layui.js" charset="utf-8"></script>
    <style>
        .layui-table-cell{
            height:auto !important;
        }
    </style>
</head>
<body>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 开启头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="pname" id="demoReload" placeholder="请输入产品名称" autocomplete="off">
        </div>
        <button class="layui-btn" lay-event="reload">搜索</button>
        <button class="layui-btn" lay-event="add">添加</button>
        <marquee width="600" style="position: absolute; bottom: 13px;">温馨提示：您的产品只有六款能够显示在我们的网站上,请注意添加</marquee>
    </div>
</script>

<div id="prodiv" style="display:none; margin:10px;">
    <form class="layui-form" action="" lay-filter="formTest" id="form">
        <div class="layui-form-item">
            <label class="layui-form-label">产品名称</label>
            <div class="layui-input-block">
                <input type="text" name="pname" required  lay-verify="required" placeholder="请输入产品名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品介绍</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入产品简介" required  lay-verify="required" class="layui-textarea" autocomplete="off" name="pintroduce"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品图片</label>
            <div class="layui-upload">
                <input type="hidden" name="plogo" id="plogo" required  lay-verify="required" autocomplete="off" class="layui-input">
                <button type="button" style="width:80px;height:33px"  id="test8">选择文件</button>
                <button type="button" style="width:80px;height:33px"  id="test9">开始上传</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use(['table','form','upload'], function(){
        var table = layui.table;//layui中使用html的table
        var $ = layui.$;//layui中使用jQuery
        var form = layui.form;
        var upload = layui.upload;

        upload.render({
            elem: '#test8'
            ,url: '/file/upload'
            ,auto: false
            //,multiple: true
            ,bindAction: '#test9'
            ,done: function(d){//成功回调
                layer.msg(d.msg + d.plogo,{
                    time:1000
                });
                $("#plogo").val(d.plogo);

            }
        });

        function getRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if(url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for(var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
        var xx = getRequest().username;
        var protab = table.render({//表格渲染
            elem: '#test'
            ,url:'/product/showAll?username='+ xx
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [[//列  标题栏
                {field:'zizeng', title: '序号', sort: true,templet:'#zizeng',width:90}
                ,{field:'plogo', title: '产品图片',width:90,templet:'<div><img width="100%" height="100%" src="{{d.plogo}}"></div>'}
                ,{field:'pname', title: '产品名称',width:130}
                ,{field:'pintroduce', title: '产品介绍'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:140}
            ]]
            ,page:true
            //表格加载完成之后可以对表格进行二次操作，渲染完回调
            ,done: function(res, curr, count){
                $("#demoReload").val(res.pname);
            }
        });
        //监听头部工具栏事件
        table.on('toolbar(test)', function(obj){
            if(obj.event === 'add'){
                var data = obj.data;
                $("#form").append("<input type=\"hidden\" name=\"bid\" required  lay-verify=\"required\" autocomplete=\"off\" class=\"layui-input\"/>");
                //在添加之前清空form表单中的数据
                form.val("formTest",{
                    "bid":getRequest().bid
                    ,"pname":""
                    ,"pintroduce":""
                    ,"plogo":""
                });
                var alayer = layer.open({
                    type: 1
                    ,anim: 2
                    ,content: $('#prodiv')
                });
                form.on('submit(formDemo)',function (data){
                    layer.close(alayer);
                    $.ajax({
                        url:"/product/add"
                        ,type:"post"
                        ,data:data.field
                        ,success:function(d){
                            if(d === 1){
                                layer.msg('添加成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    protab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            pid:null
                                        }
                                    });
                                });
                            }
                        }
                    });
                    return false;//阻止表单跳转
                });
            }else if(obj.event === 'reload'){
                protab.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        pname:$('#demoReload').val()
                    }
                });
            }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定要删除吗', function(){
                    $.ajax({
                        url:'/product/del/'+data.pid,
                        type:'delete',
                        success:function (d){
                            if(d === 1){
                                layer.msg('删除成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    protab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            pid:null
                                        }
                                    });
                                });
                            }
                        }
                    });

                });
            }else if(obj.event === 'edit'){
                $("#form").append("<input type=\"hidden\" name=\"pid\" required  lay-verify=\"required\" autocomplete=\"off\" class=\"layui-input\">");
                var uplayer = layer.open({
                    type: 1
                    ,anim: 3
                    ,content: $('#prodiv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                //form自动赋值
                form.val("formTest",{
                    "pid":data.pid
                    ,"pname":data.pname
                    ,"pintroduce":data.pintroduce
                    ,"plogo":data.plogo
                });

                //提交
                form.on('submit(formDemo)',function (data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"/product/update"
                        ,type:"post"
                        ,data:data.field//所有数据字段
                        ,success:function(d){
                            if(d === 1){
                                layer.msg('修改成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    protab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            pid:null
                                        }
                                    });
                                });
                            }
                        }
                    });
                    return false;//阻止表单跳转
                });
            }
        });
    });
</script>
<script>

</script>
<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>
</body>
</html>